<template>
  <div>
    <!-- 查询区域 -->
    <div style="display: flex; align-items: center">
      <el-input
        style="width: 200px"
        placeholder="查询订单号"
        v-model="yard_id"
      ></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="load(1)"
        >查询</el-button
      >
      <el-button type="info" @click="reset">重置</el-button>
      <el-button
        type="primary"
        style="margin-left: auto; margin-right: 0"
        @click="goBack"
        >返回</el-button
      >
    </div>
    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      stripe
      :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
    >
      <el-table-column
        prop="reserve_id"
        label="订单ID"
        width="70"
        align="center"
      ></el-table-column>
      <el-table-column prop="yard_id" label="场地号"></el-table-column>
      <el-table-column prop="campusname" label="场馆名称"></el-table-column>
      <el-table-column prop="yard_name" label="场地名称"></el-table-column>
      <el-table-column prop="reserve_date" label="预约日期"></el-table-column>
      <el-table-column prop="reserve_time" label="预约时间"></el-table-column>
      <el-table-column prop="duration" label="预约时长"></el-table-column>
      <el-table-column prop="total_cost" label="总费用"></el-table-column>
      <el-table-column prop="user_id" label="用户ID"></el-table-column>
      <el-table-column prop="create_at" label="创建时间"></el-table-column>
      <el-table-column label="订单状态">
        <template v-slot="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleEdit(scope.row)"
            >详情</el-button
          >
          <el-button size="mini" type="danger" plain @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div style="margin: 10px 0">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();

const tableData = ref([]); // 所有的数据
const pageNum = ref(1); // 当前的页码
const pageSize = ref(10); // 每页显示的个数
const total = ref(0);
const yard_id = ref("");
const userId = ref(localStorage.getItem("userId")); // 假设用户ID存储在localStorage中

// 分页查询逻辑

const load = (pageNumParam) => {
  const currentPageNum = pageNumParam || pageNum.value;
  axios
    .get("http://localhost:8000/Order", {
      params: {
        pageNum: currentPageNum,
        pageSize: pageSize.value,
        yard_id: yard_id.value,
        userId: userId.value,
      },
    })
    .then((res) => {
      if (res.data && res.data.data && res.data.data.records) {
        tableData.value = res.data.data.records;
        total.value = res.data.data.total;
      } else {
        ElMessage.error("服务器返回数据格式不正确");
      }
    })
    .catch((err) => {
      ElMessage.error("加载数据失败，请稍后再试");
    });
};

// 重置逻辑
const reset = () => {
  yard_id.value = "";
  load();
};

// 订单状态显示逻辑
const getStatusType = (status) => {
  switch (status) {
    case "待处理":
      return "info";
    case "已发货":
      return "success";
    case "已取消":
      return "danger";
    default:
      return "";
  }
};

onMounted(() => {
  load();
});

const handleCurrentChange = (pageNum) => {
  load(pageNum);
};

const del = (id) => {
  ElMessageBox.confirm("您确认删除吗？", "确认删除", { type: "warning" })
    .then((response) => {
      axios
        .delete("/notice/delete/" + id)
        .then((res) => {
          if (res.data.code === "200") {
            // 表示操作成功
            ElMessage.success("操作成功");
            load(1);
          } else {
            ElMessage.error(res.data.msg); // 弹出错误的信息
          }
        })
        .catch((err) => {
          ElMessage.error("删除失败，请稍后再试");
        });
    })
    .catch(() => {});
};

const handleEdit = (row) => {
  router.push({ name: "Auth", params: { id: row.id } });
};

const goBack = () => {
  router.push({ name: " UserProfile" });
};
</script>

<style>
.el-tooltip__popper {
  max-width: 300px !important;
}
</style>
